<template>
    <view class="mpvue-picker">
        <view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
        <view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
            <view class="mpvue-picker__hd" catchtouchmove="true">
                <view class="mpvue-picker__action" @click="pickerCancel">取消</view>
                <view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">確定</view>
            </view>
            <!-- 單列 -->
            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='selector' && pickerValueSingleArray.length > 0">
                <block>
                    <picker-view-column>
                        <view class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">{{item.name}}</view>
                    </picker-view-column>
                </block>
            </picker-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pickerChangeValue: [],
                pickerValue: [],
                pickerValueArrayChange: true,
                modeChange: false,
                pickerValueSingleArray: [],
				/* 是否顯示控件 */
				showPicker: false,
            };
        },
        props: {
            /* mode */
            mode: {
                type: String,
                default: 'selector'
            },
            /* picker 數值 */
            pickerValueArray: {
                type: Array,
                default(){
					return []
				}
            },
            /* 默認值 */
            pickerValueDefault: {
                type: Array,
                default(){
                	return []
                }
            },
            /* 幾級聯動 */
            deepLength: {
                type: Number,
                default: 2
            },
            /* 主題色 */
            themeColor: String
        },
        watch: {
            pickerValueArray(oldVal, newVal) {
                this.pickerValueArrayChange = true;
            },
            mode(oldVal, newVal) {
                this.modeChange = true;
            },
			pickerValueArray(val){
				this.initPicker(val);
			}
        },
        methods: {
            initPicker(valueArray) {
                let pickerValueArray = valueArray;
                this.pickerValue = this.pickerValueDefault;
                // 初始化壹級聯動
                if (this.mode === 'selector') {
                    this.pickerValueSingleArray = valueArray;
                }
            },
            show() {
                setTimeout(() => {
                    if (this.pickerValueArrayChange || this.modeChange) {
                        this.initPicker(this.pickerValueArray);
                        this.showPicker = true;
                        this.pickerValueArrayChange = false;
                        this.modeChange = false;
                    } else {
                        this.showPicker = true;
                    }
                }, 0);
            },
            maskClick() {
                this.pickerCancel();
            },
            pickerCancel() {
                this.showPicker = false;
                this._initPickerVale();
                let pickObj = {
                    name: this._getPickerLabelAndValue(this.pickerValue, this.mode).name,
					type: this._getPickerLabelAndValue(this.pickerValue, this.mode).type,
					ispaymentcode: this._getPickerLabelAndValue(this.pickerValue, this.mode).code
                };
                this.$emit('onCancel', pickObj);
            },
            pickerConfirm(e) {
                this.showPicker = false;
                this._initPickerVale();
                let pickObj = {
                    name: this._getPickerLabelAndValue(this.pickerValue, this.mode).name,
					type: this._getPickerLabelAndValue(this.pickerValue, this.mode).type,
					ispaymentcode: this._getPickerLabelAndValue(this.pickerValue, this.mode).code
                };
                this.$emit('onConfirm', pickObj);
            },
            showPickerView() {
                this.showPicker = true;
            },
            pickerChange(e) {
                this.pickerValue = e.mp.detail.value;
                let pickObj = {
                    name: this._getPickerLabelAndValue(this.pickerValue, this.mode).name,
					type: this._getPickerLabelAndValue(this.pickerValue, this.mode).type,
					ispaymentcode: this._getPickerLabelAndValue(this.pickerValue, this.mode).code
                };
                this.$emit('onChange', pickObj);
            },
            // 獲取 pxikerLabel
            _getPickerLabelAndValue(value, mode) {
                let pickerName;
                let pickerType;
                let pickerCode;
                // selector
                if (mode === 'selector') {
                    pickerType = this.pickerValueSingleArray[value].id;
                    pickerName = this.pickerValueSingleArray[value].name;
                    pickerCode = this.pickerValueSingleArray[value].ispaymentcode;
                }
                return {
                    name: pickerName,
					type: pickerType,
                    code: pickerCode
                };
            },
            // 初始化 pickerValue 默認值
            _initPickerVale() {
                if (this.pickerValue.length === 0) {
                    if (this.mode === 'selector') {
                        this.pickerValue = [0];
                    } else if (this.mode === 'multiSelector') {
                        this.pickerValue = new Int8Array(this.pickerValueArray.length);
                    }
                }
            }
        }
    };
</script>

<style>
    .pickerMask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .mpvue-picker-content {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        transition: all 0.3s ease;
        transform: translateY(100%);
        z-index: 3000;
    }

    .mpvue-picker-view-show {
        transform: translateY(0);
    }

    .mpvue-picker__hd {
        display: flex;
        padding: 18upx 30upx;
        background-color: #fff;
        position: relative;
        text-align: center;
        font-size: 34upx;
    }

	.uni-picker-view-mask{
		padding-top: 400upx;
	}
    .mpvue-picker__hd:after {
        content: ' ';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 2upx;
        border-bottom: 2upx solid #e5e5e5;
        color: #e5e5e5;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
    }

    .mpvue-picker__action {
        display: block;
        flex: 1;
        color: #1aad19;
    }

    .mpvue-picker__action:first-child {
        text-align: left;
        color: #888;
    }

    .mpvue-picker__action:last-child {
        text-align: right;
    }

    .picker-item {
        text-align: center;
        line-height: 80upx;
        font-size: 32upx;
    }

    .mpvue-picker-view {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 476upx;
        background-color: rgba(255, 255, 255, 1);
    }
</style>
